'use client'

import React, { useState } from 'react';
import DialogWrapper from './dialog-wrapper';
import { EnvelopeIcon, LockClosedIcon } from '@heroicons/react/24/outline';
import { userApi } from '@/lib/api';

interface SecurityDialogProps {
  isOpen: boolean;
  onClose: () => void;
  email: string;
}

export default function SecurityDialog({
  isOpen,
  onClose,
  email
}: SecurityDialogProps) {
  const [isResetEmailSent, setIsResetEmailSent] = useState(false);
  const [isSending, setIsSending] = useState(false);
  const [successMessage, setSuccessMessage] = useState<string | null>(null);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

  // 重置状态
  React.useEffect(() => {
    if (isOpen) {
      setIsResetEmailSent(false);
      setSuccessMessage(null);
      setErrorMessage(null);
    }
  }, [isOpen]);

  // 发送重置密码邮件
  const handleSendResetEmail = async () => {
    if (isSending) return;
    
    setIsSending(true);
    setSuccessMessage(null);
    setErrorMessage(null);
    
    try {
      // 调用API发送重置密码邮件
      await userApi.sendPasswordResetEmail(email);
      
      // 设置成功状态
      setIsResetEmailSent(true);
      setSuccessMessage(`重置密码邮件已发送至 ${email}`);
    } catch (error) {
      console.error('发送重置密码邮件失败:', error);
      setErrorMessage('发送失败，请稍后重试');
    } finally {
      setIsSending(false);
    }
  };

  return (
    <DialogWrapper
      isOpen={isOpen}
      onClose={onClose}
      title="安全设置"
      size="md"
    >
      {successMessage && (
        <div className="mb-4 p-3 bg-green-50 border-l-4 border-green-500 text-green-700 rounded-md">
          <p>{successMessage}</p>
        </div>
      )}
      
      {errorMessage && (
        <div className="mb-4 p-3 bg-red-50 border-l-4 border-red-500 text-red-700 rounded-md">
          <p>{errorMessage}</p>
        </div>
      )}
      
      <div className="space-y-6">
        {/* 密码重置 */}
        <div className="bg-white p-4 rounded-lg border border-gray-200">
          <div className="flex items-start">
            <div className="flex-shrink-0">
              <LockClosedIcon className="h-6 w-6 text-gray-400" />
            </div>
            <div className="ml-3 flex-1">
              <h3 className="text-lg font-medium text-gray-900">修改密码</h3>
              <p className="mt-1 text-sm text-gray-500">
                通过邮箱验证重置您的密码。我们会向您的邮箱发送一封包含重置链接的邮件。
              </p>
              <div className="mt-4">
                <button
                  type="button"
                  onClick={handleSendResetEmail}
                  disabled={isSending || isResetEmailSent}
                  className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-[var(--primary-color)] hover:bg-[var(--primary-hover)] focus:outline-none disabled:opacity-50"
                >
                  {isSending ? (
                    '发送中...'
                  ) : isResetEmailSent ? (
                    <span className="flex items-center">
                      <svg className="w-4 h-4 mr-2 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
                      </svg>
                      已发送
                    </span>
                  ) : (
                    '发送重置邮件'
                  )}
                </button>
              </div>
            </div>
          </div>
        </div>
        
        {/* 双因素认证 */}
        <div className="bg-white p-4 rounded-lg border border-gray-200">
          <div className="flex items-start">
            <div className="flex-shrink-0">
              <EnvelopeIcon className="h-6 w-6 text-gray-400" />
            </div>
            <div className="ml-3 flex-1">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-medium text-gray-900">双因素认证</h3>
                <span className="px-2 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-800">
                  即将推出
                </span>
              </div>
              <p className="mt-1 text-sm text-gray-500">
                启用双因素认证，为您的账户添加额外的安全保护。每次登录时，除了密码外，还需要输入手机或认证应用生成的验证码。
              </p>
              <div className="mt-4">
                <button
                  type="button"
                  disabled={true}
                  className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  即将推出
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      {/* 操作按钮 */}
      <div className="mt-6 flex justify-end">
        <button
          type="button"
          className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none"
          onClick={onClose}
        >
          关闭
        </button>
      </div>
    </DialogWrapper>
  );
} 